<template>
    <div class="detail">
        <van-image
            width="100%"
            height="40%"
            fit="contain"
            :src="list.picture"
        />
        <van-cell-group>
            <van-cell>
                <template #title>
                    <span class="custom-title">￥{{ list.price }}</span>
                    <span class="oldprice">原价￥{{ list.oldprice }}</span>
                </template>
                <template #label>
                    <marquee class="des">
                        {{ list.detail }}
                   </marquee>
                </template>
                <template #value>
                    <span behavior="scroll" direction="left" class="store">{{
                        list.shop
                    }}</span>
                </template>
            </van-cell>
        </van-cell-group>
        <van-cell title="用户评论" value="查看全部" is-link />
        <van-submit-bar
            class="buttom"
            text-align="left"
            button-text="加入购物车"
            @submit="onSubmit"
        >
            <van-icon
                name="wap-home-o"
                size="30"
                @click="toHome"
                class="icon"
            />
            <van-icon
                name="shopping-cart-o"
                size="30"
                @click="toCart"
                class="icon"
            />
        </van-submit-bar>
    </div>
</template>

<script lang="ts" setup>
import { useDeail } from "@/hooks/goodsDetail"
const { list,
    toHome,
    toCart,
    onSubmit} = useDeail()
</script>

<style scoped lang="scss">

    

.icon {
    margin: 0 5px;
}
.custom-title {
    font-size: 1.2rem;
    color: red;
}
.oldprice {
    color: #ccc;
    font-size: 0.6rem;
    text-decoration: line-through;
    margin-left: 1rem;
}
.des {
    width: 18rem;
    color: #000;
    overflow: hidden;
    font-size: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.store {
    width: 80px;
    font-size: 0.8rem;
    
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
</style>
